const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    target: 'web',
    mode: 'development',
    devtool: 'cheap-eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    entry: [
        path.resolve(__dirname, '../source/index.jsx')
    ],
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, '../public'),
        publicPath: '/'
    },    
    module: {
        rules: [{
            test: /\.js(x?)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-react", "@babel/env"],
                    plugins: [
                        "@babel/plugin-transform-runtime",
                        "@loadable/babel-plugin"
                    ]
                }
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development"),
            "process.env.REACT": JSON.stringify("client"),
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    watchOptions: {
        ignored: [/node_modules/]
    },
    optimization: {
        minimize: true,
        runtimeChunk: {
            name: 'runtime'
        },
        splitChunks: {
            chunks: 'initial',
        }
    },
    devServer: {
        contentBase: './public',
        publicPath: '/',
        historyApiFallback: true,
        inline: true,
        progress:true,
        hot:true,
        port: 3000
    }
};